<template>
  <div class="main-content">
    <div style="height:60px; background-color: #e6e2e1;"></div>

    <!-- 三列布局 -->
    <div style="display: flex; width: 100%;">
      <div class="left"></div>
      <div class="center">
        <div style="color: #FE0137FF; margin: 15px 0 15px 18px; font-weight: bold; font-size:16px">主题市场</div>
        <div style="display: flex;margin: 0 25px">
          <div style="flex: 2">
            <div style="display: flex;color:#666666FF;margin:14px 0" v-for="item in typeData">
              <div style="margin-left: 10px; font-size: 14px">{{item.name}}</div>
            </div>
          </div>
          <div style="flex:5; height: 300px;background-color:greenyellow"></div>
          <div style="flex: 3; height: 300px;background-color:red"></div>
        </div>
      </div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  data(){
    return{
      typeData:[]
    }
  },

  mounted() {
    this.loadType();
  },

  methods:{
    loadType(){
      request.get('/category/selectAll').then(res =>{
        if(res.code === '200'){
          this.typeData=res.data
        }else{
          this.$message.error(res.msq)
        }
      })
    }
  }
}

</script>

<style scoped>
.main-content {
  display: flex;
  flex-direction: column; /* 确保布局为列方向 */
  min-height: 100vh; /* 保证内容占满屏幕 */
}

.left, .right {
  width: 12%;
  background-color: #e6e2e1;
  height: 1000px;
}

.center {
  width: 76%;
  background-color: #f3e6d8;
  height: 1000px;
}
</style>
<script lang="ts">
</script>